<template>
	<view>
		<template v-for="(item, index) in options">
			<template v-if="item.type=='r-row'">
				<r-row :option="item.option" :compStyle="item.compStyle"></r-row>
			</template>
			<!-- <template v-else-if="item.type=='r-col'">
				<r-col :option="item.option" :compStyle="item.compStyle"></r-col>
			</template> -->
			<template v-else-if="item.type=='r-tabbar'">
				<r-tabbar :option="item.option" :compStyle="item.compStyle"></r-tabbar>
			</template>
			<template v-else-if="item.type=='r-gap'">
				<r-gap :option="item.option" :compStyle="item.compStyle"></r-gap>
			</template>
			<template v-else-if="item.type=='r-form-input'">
				<r-form-input :option="item.option" :compStyle="item.compStyle"></r-form-input>
			</template>
			<template v-else-if="item.type=='r-me'">
				<r-me :option="item.option" :compStyle="item.compStyle"></r-me>
			</template>
			<template v-else-if="item.type=='r-form-input'">
				<r-form-input :option="item.option" :compStyle="item.compStyle"></r-form-input>
			</template>
			<template v-else-if="item.type=='r-card'">
				<r-card :option="item.option" :compStyle="item.compStyle"></r-card>
			</template>
			<template v-else-if="item.type=='r-cell'">
				<r-cell :option="item.option" :compStyle="item.compStyle"></r-cell>
			</template>
			<template v-else-if="item.type=='r-chart-line'">
				<r-chart-line :option="item.option" :compStyle="item.compStyle"></r-chart-line>
			</template>
			<template v-else-if="item.type=='r-chart-pie'">
				<r-chart-pie :option="item.option" :compStyle="item.compStyle"></r-chart-pie>
			</template>
			<template v-else-if="item.type=='r-form-input-map'">
				<r-form-input-map :option="item.option" :compStyle="item.compStyle"></r-form-input-map>
			</template>
			<template v-else-if="item.type=='r-form'">
				<r-form :option="item.option" :compStyle="item.compStyle"></r-form>
			</template>
			<template v-else-if="item.type=='r-form-checkboxes'">
				<r-form-checkboxes :option="item.option" :compStyle="item.compStyle"></r-form-checkboxes>
			</template>
			<template v-else-if="item.type=='r-form-input-time'">
				<r-form-input-time :option="item.option" :compStyle="item.compStyle"></r-form-input-time>
			</template>
			<template v-else-if="item.type=='r-form-radio'">
				<r-form-radio :option="item.option" :compStyle="item.compStyle"></r-form-radio>
			</template>
			<template v-else-if="item.type=='r-form-rate'">
				<r-form-rate :option="item.option" :compStyle="item.compStyle"></r-form-rate>
			</template>
			<template v-else-if="item.type=='r-form-slider'">
				<r-form-slider :option="item.option" :compStyle="item.compStyle"></r-form-slider>
			</template>
			<template v-else-if="item.type=='r-form-checkboxes'">
				<r-form-checkboxes :option="item.option" :compStyle="item.compStyle"></r-form-checkboxes>
			</template>
			<template v-else-if="item.type=='r-form-switch'">
				<r-form-switch :option="item.option" :compStyle="item.compStyle"></r-form-switch>
			</template>
			<template v-else-if="item.type=='r-form-numberbox'">
				<r-form-numberbox :option="item.option" :compStyle="item.compStyle"></r-form-numberbox>
			</template>
			<template v-else-if="item.type=='r-grid'">
				<r-grid :option="item.option" :compStyle="item.compStyle"></r-grid>
			</template>
			<template v-else-if="item.type=='r-image'">
				<r-image :option="item.option" :compStyle="item.compStyle"></r-image>
			</template>
			<template v-else-if="item.type=='r-lottery'">
				<r-lottery :option="item.option" :compStyle="item.compStyle"></r-lottery>
			</template>
			<template v-else-if="item.type=='r-menu'">
				<r-menu :option="item.option" :compStyle="item.compStyle"></r-menu>
			</template>
			<template v-else-if="item.type=='r-login'">
				<r-login :option="item.option" :compStyle="item.compStyle"></r-login>
			</template>
			<template v-else-if="item.type=='r-swiper'">
				<r-swiper :option="item.option" :compStyle="item.compStyle"></r-swiper>
			</template>
			<template v-else-if="item.type=='r-tabs'">
				<r-tabs :option="item.option" :compStyle="item.compStyle"></r-tabs>
			</template>
			<template v-else-if="item.type=='r-subsection'">
				<r-subsection :option="item.option" :compStyle="item.compStyle"></r-subsection>
			</template>
			<template v-else-if="item.type=='r-parse'">
				<r-parse :option="item.option" :compStyle="item.compStyle"></r-parse>
			</template>
			<!-- 	<component v-for="(item, index) in options" :key="index" :is="item.type" :option="item.option"
			:compStyle="item.compStyle"></component> -->
		</template>
	</view>
</template>

<script>
	// import rFormInput from '../r-form-input/.vue';
	// import rButton from '../r-button/.vue'
	// import rCard from '../r-card/.vue'
	// import rCell from '../r-cell/.vue'
	// import rChartLine from '../r-chart-line/.vue'
	// import rChartPie from '../r-chart-pie/.vue'
	// import rChartRadar from '../r-chart-radar/r-chart-radar.vue'
	// import rDataoptions from '../r-data-options/r-data-options.vue'
	// import RFormInputMap from '../r-form-input-map/.vue';
	// import RForm from '../r-form/.vue';
	// import RFormCheckboxes from '..//.vue';
	// import RFormInputTime from '../r-form-input-time/.vue';
	// import RFormRadio from '../r-form-radio/';
	// import RFormRate from '../r-form-rate/';
	// import RFormSlider from '../r-form-slider/.vue';
	// import RFormSwitch from '../r-form-switch/.vue';
	// import RFormNumberbox from '../r-form-numberbox/.vue';
	// import RGrid from '../r-grid/.vue';
	// import RImage from '../r-image/.vue';
	// import RLogin from '../r-login/.vue';
	// import RLottery from '../r-lottery/.vue';
	// import RMe from '../r-me/r-me.vue';
	// import RMenu from '../r-menu/.vue';
	// import RSwiper from '../r-swiper/.vue';
	// import RTabs from '../r-tabs/.vue';
	// import RSubsection from '../r-subsection/.vue';
	// import RParse from '../r-parse/.vue'
	export default {
		// components: {
		// 	RParse,
		// 	rCard,
		// 	rCell,
		// 	rChartLine,
		// 	rChartPie,
		// 	rFormInput,
		// 	rButton,
		// 	RFormInputMap,
		// 	RForm,
		// 	rDataoptions,
		// 	rChartRadar,
		// 	RFormCheckboxes,
		// 	RFormInputTime,
		// 	RFormRadio,
		// 	RFormRate,
		// 	RFormSlider,
		// 	RFormSwitch,
		// 	RFormNumberbox,
		// 	RGrid,
		// 	RImage,
		// 	RLogin,
		// 	RLottery,
		// 	RMe,
		// 	RMenu,
		// 	RSwiper,
		// 	RTabs,
		// 	RSubsection
		// },
		name: 'r-vue-page-item',
		props: {
			options: {
				type: Array,
				require: true
			}
		},
		data() {
			return {

			}
		}
	};
</script>

<style lang="scss">
</style>
